<template>
    <div>
         <h1>短信验证码登录组件</h1>
        <div class="phone">
             <!-- 发送 给组件的方法-->
             <!-- 
                 父组件
                 1: 入参 : 计时器 + 表单属性对象(手机号+验证码)
                 2: 发送验证码方法: 成功提示
                 3: 提交(登录方法)
                 4: 错误处理方法

                 子组件: 
                 1: 接受属性并进行处理
                    1.1: 校验手机号: 通过校验对象进行校验 
                    1.2: 发送验证码方法(按钮置灰处理)
                    1.3: 一个属性(一个字段)(一个功能)
              -->
            <phone-login
                :count-down="30"
                :phone-form="phoneForm"
                @send="send"
                @submit="submit"
                @errHandle="errHandle"
                >
            </phone-login>
        </div>
        <div v-for="index in 200" :key="index">
            这是回到顶部页面2--{{index}}
        </div>
    </div>
</template>

<script>
    export default {
        name: "backTopTwo",
        data() {
            return {
                phoneForm: {
                    phone: '',
                    code: ''
                }
            }
        },
        methods: {
            submit() {
                this.setSucMessage('提交成功!');
            },
            errHandle() {
                 this.setErrMessage('表单填写有误,请检查!');
            },
            send() {
                this.$message.info('发送验证码成功')
            }
        }
    }
</script>

<style scoped>

</style>
